﻿<head>
    <script src="~/lib/vue/dist/vue.global.js"></script>
    <link href="~/lib/element-plus/dist/index.css" rel="stylesheet" />
    <script src="~/lib/element-plus/dist/index.full.js"></script>
    <script src="~/lib/axios/dist/axios.js"></script>
    <link href="~/css/table.css" rel="stylesheet" />
</head>

<div id="app">
    <table width="100%">
        <tr>
            <td>
                <p color="black">
                    您正在做的业务是：人力资源--薪酬标准管理--薪酬标准变更
                </p>
            </td>
        </tr>
        <tr>
            <td align="right">
                <input type="button" value="提 交" v-on:click="check()" class="BUTTON_STYLE1">
                <input type="reset" value="返 回" class="BUTTON_STYLE1">
            </td>
        </tr>
    </table>
    <table id="stable" width="100%" border="1" cellpadding=0 cellspacing=1
           bordercolorlight=#848284 bordercolordark=#eeeeee
           class="TABLE_STYLE1">
        <tr>
            <td width="74" class="TD_STYLE1">
                薪酬标准编号
            </td>
            <td width="168" class="TD_STYLE2">
                <el-input readonly="readonly" class="INPUT_STYLE2" v-model="salaryStandard.sId">
                </el-input>
            </td>
            <td width="83" class="TD_STYLE1">
                薪酬标准名称
            </td>
            <td width="171" class="TD_STYLE2">
                <el-input name="standard.standardName" id="standardName" class="INPUT_STYLE2" v-model="salaryStandard.sName"> </el-input>
            </td>
            <td width="170" class="TD_STYLE1">
                薪酬总额
            </td>
            <td width="138" class="TD_STYLE2">
                <el-input name="standard.salarySum" id="sumSalary" readonly class="INPUT_STYLE2" v-model="salaryStandard.sSum" :value="formatDecimal2(salaryStandard.sSum)"></el-input>
            </td>
            <td width="103" class="TD_STYLE1">
                &nbsp;
            </td>
            <td width="95" height="26" class="TD_STYLE2">
                &nbsp;
            </td>
        </tr>
        <tr>
            <td class="TD_STYLE1">
                制定人
            </td>
            <td class="TD_STYLE2">
                <el-popover placement="right" :width="100" trigger="click">
                    <template #reference>
                        <el-input id="designer" name="standard.designer" class="INPUT_STYLE2" v-model="salaryStandard.designer"> </el-input>
                    </template>
                    <el-table :data="gridData" v-on:row-dblclick="dbSelected">
                        <el-table-column width="120" property="uName" />
                    </el-table>
                </el-popover>
            </td>
            <td class="TD_STYLE1">
                变更人
            </td>
            <td class="TD_STYLE2">
                <el-input type="text" name="standard.changer" readonly="readonly" class="INPUT_STYLE2" v-model="salaryStandard.changer"></el-input>
            </td>
            <td class="TD_STYLE1">
                变更时间
            </td>
            <td class="TD_STYLE2">
                <el-input type="text" id="Tdate" name="standard.changeTime" readonly="readonly" class="INPUT_STYLE2" v-model="salaryStandard.changeTime"></el-input>
            </td>
            <td class="TD_STYLE1">
                &nbsp;
            </td>
            <td class="TD_STYLE2">
                &nbsp;
            </td>
        </tr>
        <tr>
            <td class="TD_STYLE1">
               备注
            </td>
            <td colspan="7" class="TD_STYLE2">
                <textarea name="standard.remark" rows="4" class="TEXTAREA_STYLE1" v-model="salaryStandard.remark"></textarea>
            </td>
        </tr>
    </table>

    <el-table :data="tableData">
        <el-table-column prop="itemId" label="薪酬项目编号"></el-table-column>
        <el-table-column prop="itemName" label="薪酬项目名称"></el-table-column>
        <el-table-column label="金额">
            <template #default="scope">
                <el-input type="text" v-model="scope.row.salary" class="INPUT_STYLE2" v-on:input="updateTotalAmount"  :value="formatDecimal2(scope.row.salary)"></el-input>
            </template>
        </el-table-column>
    </el-table>
    <p>
        <!-- v-on:input="updateTotalAmount"-->
        &nbsp;
    </p>
</div>
<script type="text/javascript">

    var { createApp, reactive, ref } = Vue
    var app = createApp({
        setup() {
            const urlParams = new URLSearchParams(window.location.search);
            const rowData = JSON.parse(urlParams.get('rowData'));

            let gridData = ref([])
            const formatGridData = () => {
                axios.post('/GetName')
                    .then(res => {

                        gridData.value = res.data;
                        console.log(gridData)
                    })
                    .catch(error => {
                        console.error('Error fetching tableData:', error);
                    });
            }
            function dbSelected(row) {
                salaryStandard.designer = row.uName
            }
            // 初始的薪酬标准数据
            const salaryStandard = reactive({
                sId: rowData.standardId,
                sName:rowData.standardName ,
                sSum: rowData.salarySum,
                designer: rowData.designer,
                changer: '',
                changeTime: '',
                changeStatus:'',
                remark: ''
            });

            //提交按键
            function check() {
                axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
                axios.post('/UpdateSSDesigne',{
                    ssdId: rowData.ssdId,
                    StandardName: salaryStandard.sName,
                    salarySum: salaryStandard.sSum,
                    designer: salaryStandard.designer,
                    changer: salaryStandard.changer,
                    remark: salaryStandard.remark
                }).then(res => {
                    if (res.data) {
                        window.location.href = "/Alteration/Index";
                        alert("成功");
                    }
                }).catch(err => {
                    console.log(err);
                })

            }
            //获取 登记人
            const fetchData = () => {
                console.log(rowData)
                // 获取存储的res.data值
                const responseDataString = sessionStorage.getItem('User');
                if (responseDataString) {
                    // 将存储的字符串转换回数组
                    const responseDataArray = JSON.parse(responseDataString);

                    // 现在您可以访问responseDataArray数组中的元素
                    salaryStandard.changer = responseDataArray.uName;
                } else {
                    console.log("未找到存储的值");
                }
            };
            //自动生成时间
            function time() {
                var tdate = document.getElementById("Tdate");
                var d = new Date();
                var y = d.getFullYear();
                var moth = d.getMonth() + 1;
                var date = d.getDate();
                var h = d.getHours();
                var m = d.getMinutes();
                var s = d.getSeconds();
                var hh = 20 - 1 - h;
                var mm = 60 - 1 - m;
                var ss = 60 - s;
                if (hh > 0) {
                    mm = mm + 60 * hh;
                }
                if (moth < 10) {
                    moth = "0" + moth;
                }
                if (date < 10) {
                    date = "0" + date;
                }
                if (h < 10) {
                    h = "0" + h;
                }
                if (m < 10) {
                    m = "0" + m;
                }
                if (s < 10) {
                    s = "0" + s;
                }
                if (mm < 10) {
                    mm = "0" + mm;
                }
                if (ss < 10) {
                    ss = "0" + ss;
                }

                tdate.value = y + "-" + moth + "-" + date + " " + h + ":" + m + ":" + s;

            }
            window.onload = time;
            window.setInterval(time, 1000);
            let tableData = ref([])

            var options = ref([]);

            //进行金额相加并且修改SSD表
            function updateTotalAmount() {
                let totalSum = 0; // 用于存储累加后的数字总和
                tableData.value.forEach(item => {
                    //金额相加
                    const amountNumber = parseFloat(item.salary);
                    if (!isNaN(amountNumber)) {
                        totalSum += amountNumber; // 累加数字值
                    }
                    //修改SSD表
                    axios.post('/UpdateSSD', {
                        SdtId: item.sdtId,
                        StandardId: salaryStandard.sId,
                        StandardName: salaryStandard.sName,
                        ItemId: item.itemId,
                        ItemName: item.itemName,
                        Salary: item.salary
                    }).then(res => {
                        options.value = res.data.map(item => ({ key: item.pbcId, label: item.attributeName }));
                    });
                });
                salaryStandard.sSum = totalSum; // 将累加后的数字总和赋值给sSum
            }


            //显示SSD表
            function FillSSD() {
                axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
                axios.post('/SelectSSDStandardId', { StandardId: salaryStandard.sId })
                    .then(res => {
                        tableData.value = res.data;
                    })
            }
            function formatDecimal2(num) {
                return new Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(num);
            }

            FillSSD()
            fetchData();
            formatGridData()
            return {
                tableData,
                salaryStandard,
                check,
                updateTotalAmount,
                gridData,
                dbSelected,
                formatDecimal2
            }
        }
    })
    app.use(ElementPlus)
    app.mount("#app");

</script>
<style type="text/css">
    body {
        background-color: #FFFFBB;
        border: 1px solid #FFDB6F;
        display: block;
        margin: 8px;
    }

</style>